<template>
  <div :class="isHome ? 'tags-box' : 'tags-box1'" v-if="show">
    <div class="tags-warp">
      <router-link
        ref="tag"
        class="tags-view-item"
        :class="isActive(item) ? 'active' : ''"
        v-for="(item, index) in lists"
        :key="item.path"
        :to="item.path"
        @contextmenu.prevent="openMenu(item, $event, index)"
      >
        {{ item.title }}
        <NstdIcon class="tags-close" @click.prevent="closeTags(index)" v-if="!isAffix(item)"><IEpClose /></NstdIcon>
      </router-link>
      <ul class="contextmenu" v-show="visible" :style="{ left: left + 'px', top: top + 'px' }">
        <li @click="closeAllTags">关闭所有</li>
        <li @click="closeLeftTags">关闭左边</li>
        <li @click="closeRightTags">关闭右边</li>
        <li @click="closeOthersTags">关闭其他</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
  import { menu } from '../../../../public/menu';
  import { tagsStore } from '@/stores';
  const authNav = tagsStore();
  const router = useRouter();
  const lists = computed(() => {
    return authNav.nav;
  });
  const show = computed(() => {
    return router.currentRoute.value.meta.display;
  });
  const isAffix = (tag) => {
    return tag.affix;
  };

  const isActive = (item) => {
    return item.path === router.currentRoute.value.path;
  };

  const closeTags = (index) => {
    authNav.removeNavList(index);
    pubRouterPush();
  };
  const pubRouterPush = () => {
    let latestView = lists.value.slice(-1)[0];
    if (latestView) {
      router.push(latestView);
    } else {
      router.push(menu.length ? menu[0].children[0].menuUrl : '/home');
    }
  };

  const isHome = ref(true);
  // 右键菜单
  const visible = ref(false);
  const top = ref(0);
  const left = ref(0);
  const selectedTag = ref();
  const selectedTagIndex = ref();
  const openMenu = (item, e, index) => {
    selectedTag.value = item;
    selectedTagIndex.value = index;
    visible.value = true;
    left.value = e.clientX - 15;
    top.value = e.clientY + 15;
  };
  // 关闭所有
  const closeAllTags = () => {
    authNav.removeAllNav();
    visible.value = false;
    router.push('/');
  };
  // 关闭其他
  const closeOthersTags = () => {
    authNav.removeOtherNav(selectedTag.value);
    pubRouterPush();
    visible.value = false;
  };
  // 关闭左边
  const closeLeftTags = () => {
    authNav.removeLeftNav(selectedTagIndex.value);
    pubRouterPush();
    visible.value = false;
  };
  // 关闭右边
  const closeRightTags = () => {
    authNav.removeRightNav(selectedTagIndex.value);
    pubRouterPush();
    visible.value = false;
  };
  watch(
    () => visible.value,
    (newVal) => {
      if (newVal) {
        document.body.addEventListener('click', closeMenu);
      } else {
        document.body.removeEventListener('click', closeMenu);
      }
    }
  );
  const closeMenu = () => {
    visible.value = false;
  };
</script>

<style scoped lang="scss">
  .tags-box {
    position: absolute;
    z-index: 999;
    top: -25px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #1c4873;
    color: #fff;
    transition: all 0.5s linear;
    &:hover {
      top: 0px;
    }
  }
  .tags-box1 {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #1c4873;
    color: #fff;
  }

  .tags-warp {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    a:first-child {
      width: 200px;
    }
    a {
      display: inline-block;
      padding: 0 8px 0 20px;
      background-color: #248bcc;
      border-radius: 5px 5px 0 0;
      border-right: 1px solid #19355b;
      box-sizing: border-box;
      text-align: center;
      &.active {
        background: #ff8000;
      }
    }
    .tags-close {
      width: 16px;
      height: 16px;
      line-height: 16px;
      font-size: 16px;
      text-align: center;
      &:hover {
        background-color: #ccc;
        border-radius: 50%;
      }
    }
  }
  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 100;
    position: absolute;
    list-style-type: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    li {
      margin: 0;
      padding: 0 10px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }
</style>
